import { observer, inject } from 'mobx-react'
import { useEffect } from 'react'
function App(props) {
  useEffect(() => {
    getDoctors()

  }, []);

  // console.log("props:", props); // {doctorStore:{}}
  let { count, userInfo, doctorList, increment, getDoctors, getUserName, changeUserInfo } = props.doctorStore;

  const deleteDoctors = (id) => {
    console.log("id,,,", id);
    // get请求，参数直接拼接,如：url？key=value.
    fetch('http://127.0.0.1:80/doctor/delete',
      {
        method: 'post',
        // post请求，必须加headers，
        headers: { "content-type": "application/json" },
        // post请求，参数必须序列化。
        body: JSON.stringify({ did: id }),
      })
      .then(res => res.json())
      .then(res => {
        console.log(res);
        if (res.code === 0) {
          // alert('删除成功')
          // 调用异步的action,重新拿医生列表数据
          getDoctors()
        } else {
          alert('删除失败')
        }
      })
  }
  return (
    <div className="App">
      <h1>count: {count}</h1>
      <div><button type='button' onClick={increment}>increment</button></div>
      <h1>姓名： {userInfo.uname}</h1>
      <h2>美名： {getUserName}</h2>
      <button type='button' onClick={() => {
        changeUserInfo({ uid: 1, uname: '文庆武', usex: '男' })
      }}>修改名称</button>
      <hr />
      <div>
        {doctorList.map(el => {
          return (<p key={el.did}><span>{el.did}</span>--------- <span>{el.dname}</span> <button type='button' onClick={() => {
            deleteDoctors(el.did)
          }}>delete</button></p>)
        })}
      </div>
    </div>
  );
}

export default inject(['doctorStore'])(observer(App))

// inject(['store']),把store属性，注入到UI组件（App）的props中
/* 
inject():注入提供数据的Props属性名。
 observer(组件名)：把组件变成一个响应式的组件。

 inject(['props名称'])(observer(组件名))

 需要使用Store数据的组件，就像App这样，用injet('props名')(observer(组件名))
*/